<{include file="top_v2.html" }>
<link rel="stylesheet" href="<{$preStaticUrl}>Wap/v2/css/mui.picker.min.css?v=<{$resVersion}>" />
<script src="<{$preStaticUrl}>Wap/v2/js/mui.min.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/mui.picker.min.js"></script>
<script src="<{$preStaticUrl}>Wap/v2/js/city.data-3.js"></script>

</head>
<body>
<div id="wrap" class="pt info-page">
    <div class="header">
        个人信息
        <a href="javascript:window.history.back();" class="back"></a>
    </div>


    <div class="container">
        <div class="section-1">
            <span>头像</span>
            <img src="<{$userinfo.uid|headpic}>" alt="" />
        </div>
        <form>
        <div class="section-2">
            <ul>
                <li>
                    <label>真实姓名</label>
                    <input type="text" id="realName" name="realName" value="<{$userinfo.realName}>"/>
                </li>

                <li>
                    <label>昵称</label>
                    <input value="<{$userinfo.nickname}>" id="nickname" name="nickname" required />
                </li>

                <li>
                    <a href="<{u('bind')}>" class="phone">
                        <label>绑定手机</label>
                        <span id="phone"><{$userinfo.bindPhone|default:'未绑定'}></span>
                    </a>
                </li>

                <li>
                    <label>性别</label>
                    <span id="sexPicker"><{if $userinfo.sex == 2}>女<{else}>男<{/if}></span>
                    <input type="hidden" name="sex" value="<{$userinfo.sex}>"/>
                </li>

                <li>
                    <label>生日</label>
                    <span id="datePicker"><{$userinfo.birthday}></span>
                    <input id="birthday" name="birthday"  type="hidden"  value="<{$userinfo.birthday}>"/>
                </li>

                <li>
                    <label>地区</label>
                    <span id="cityPicker"><{if $userinfo.address != '....'}><{$address[0]}>/<{$address[1]}>/<{$address[2]}><{else}>省/市/区<{/if}></span>
                    <input type="hidden" name="area" value="<{$userinfo.province}>/<{$userinfo.city}>/<{$userinfo.district}>"/>
                </li>
            </ul>
        </div>


        <div class="section-3">
            <div class="title">收货地址</div>
            <textarea name="address"><{if $userinfo.address != '....'}><{$address[4]}><{/if}></textarea>
        </div>
        </form>
        <div class="btn-group">
            <a href="javascript:void(0);" id="btn" class="modify">保存修改</a>
        </div>
    </div>


</div>




</body>
</html>

<script>
    $(function(){
        var _getParam = function(obj, param) {
            return obj[param] || '';
        };

        //性别选择
        var sexPicker = new mui.PopPicker();
        sexPicker.setData([{
            value: '1',
            text: '男'
        }, {
            value: '2',
            text: '女'
        }]);

        var sexValue = $("input[name='sex']").val();

        sexPicker.pickers[0].setSelectedValue(sexValue)

        $("#sexPicker").click(function(){
            sexPicker.show(function(items) {
                $("#sexPicker").text(items[0].text)
                $("input[name='sex']").val(items[0].value);
            });
        })

        //日期选择
        $("#datePicker").click(function(){
            var birthValue = $("input[name='birthday']").val();
            var _self = this;
            if(_self.picker) {
                _self.picker.show(function (rs) {
                    $("input[name='birthday']").val(rs.value)
                    $(_self).text(rs.y.value+"年"+parseInt(rs.m.value)+"月"+parseInt(rs.d.value)+"日")
                    _self.picker.dispose();
                    _self.picker = null;
                });
            } else {
                _self.picker = new mui.DtPicker({
                    type: 'date',
                    value: birthValue,
                    beginDate: new Date(1900, 01, 01),
                    endDate: new Date()
                })
                _self.picker.show(function(rs) {
                    $("input[name='birthday']").val(rs.value)
                    $(_self).text(rs.y.value+"年"+parseInt(rs.m.value)+"月"+parseInt(rs.d.value)+"日")
                    _self.picker.dispose();
                    _self.picker = null;
                });
            }
        })

        //区域选择
        var cityPicker = new mui.PopPicker({
            layer: 3
        });

        cityPicker.setData(cityData3);

        var area = $("input[name='area']").val().split('/')

        for(var i=0;i<cityData3.length;i++){
            if(cityData3[i].value==area[0]){
                cityPicker.pickers[0].setSelectedIndex(i)
                var level2 = cityData3[i].children
                for(var j=0;j<level2.length;j++){
                    if(level2[j].value==area[1]){
                        cityPicker.pickers[1].setSelectedIndex(j)
                        var level3 = level2[j].children
                        if(level3){
                            for(var k=0;k<level3.length;k++){
                                if(level3[k].value==area[2]){
                                    cityPicker.pickers[2].setSelectedIndex(k)
                                    break
                                }
                            }
                        }
                        break
                    }
                }
                break
            }
        }

        $("#cityPicker").click(function(){
            var _self = this;
            cityPicker.show(function(items) {
                var text = _getParam(items[0], 'text') + "/" + _getParam(items[1], 'text') + "/" + _getParam(items[2], 'text');
                $(_self).text(text);
                var val = _getParam(items[0], 'value') + "/" + _getParam(items[1], 'value') + "/" + _getParam(items[2], 'value');
                $("input[name='area']").val(val)
            });
        })



        $('#btn').click(function(){
            var param = $('form').serialize();
            $.getJSON("<{U('User/update')}>",param, function(data){
                if(data.status!=0){
                    tip(data.msg);
                }else{

                    if(data.firstInfoPerfected){
                        tip("信息完善成功，积分+100");
                    } else{
                        tip("修改成功");
                    }
                    //window.history.go(-1);
                }
            });
            return false;
        });

    })

</script>